/**
* @description: 危险点分析-详情
* @author: zhaohui
* @data:2023年7月14日
* @remark:
**/
<template>
	<view class="app-container">
		<nav-bar class="header" back :title="title" @goBack="goBack">
		</nav-bar>
		<view class="app-content" ref="testEx">
			<view class="app-content-title">
				危险点分析及预控措施
			</view>
			<van-collapse v-model="activeNames" @change="changeScrollTop" accordion>
				<van-collapse-item class="comment" :ref="'execution'+index" v-if="list.length > 0"
					v-for="(item,index) in list" :key="index">
					<!-- 列表标题-->
					<template #title>
						<view class="select">
							<text>{{ item.hazardPointAnalysis }}</text>
						</view>
					</template>
					<!-- 列表内容-->
					<view class="selected--content">
						<!-- <van-divider /> -->
						<view class="text-content">
							<text>预控措施<br />{{item.controlMeasure}}</text>
						</view>
						<!-- 子级-->
						<view class="number">
							<view class="number-bottom" v-if="item.filePath">
								<text>现场照片</text>
								<ul>
									<li v-for="(filePathItem,index) in item.filePath.slice(0,3)" :key="index"
										@click="popImg(item.filePath)">
										<img style="width: 80px;height: 80px;" :src="baseUrl + filePathItem">
									</li>
								</ul>
							</view>
							<view class="Instructions">
								<text>现场落地情况说明</text>
								<textarea id="area" placeholder="请输入" :value="item.situationDescription"
									disabled></textarea>
							</view>
						</view>
					</view>
				</van-collapse-item>
			</van-collapse>
			<van-empty v-if="list.length === 0" description="暂无数据" />
		</view>
		<van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
			<van-swipe>
				<div v-for="(image, index) in imgList" :key="index">
					<van-swipe-item v-if="image" style="text-align: center;">
						<img :src="baseUrl + image" />
					</van-swipe-item>
				</div>
			</van-swipe>
		</van-popup>
	</view>
</template>

<script>
	import navBar from '../../common/navBar.vue'
	import baseConfig from "../../../../common/config";
	let config = {}
	baseConfig.getOptions.then(res => {
		config = res
	})
	export default {
		name: 'executionDetail',
		components: {
			navBar
		},
		data() {
			return {
				title: "危险点分析-详情",
				baseUrl: "",
				initDataParam: {},
				currentIndex: "",
				list: [],
				showPreview: false, //图图片预览
				imgList: [],
				height: 0, //移动的单个盒子的offsetTop距离
				activeNames: '',
			}
		},
		onLoad(option) {
			this.initDataParam = JSON.parse(decodeURIComponent(option.message))
			this.initData()
			this.baseUrl = config.firstUrl
			// this.baseUrl = `http://${this.$apiRequest.bzhzyApi.fileUrl}`
		},
		beforeUpdate() {
			//获取需要移动的单个盒子的offsetTop距离 只取一次
			this.$nextTick(function() {
				if (this.$refs['execution1'] && this.height == 0) {
					this.height = this.$refs['execution1'][0].$el.offsetTop					
				}
			})
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			initData() {
				this.$apiRequest.bzhzyApi.wxdmeasuresdetails({
					workPlanId: this.initDataParam.id,
					consultationDeductionId: this.initDataParam.objId
				}).then(res => {
					this.list = res.data
				})
			},
			changeScrollTop(data) {
				this.$nextTick(function() {
					//计算需要移动的距离，
					if (data > 0) {
						this.$refs['testEx'].$el.scrollTop = this.height * data
					}
				})
			},
			unFold(index) {
				this.currentIndex = this.currentIndex === index ? null : index;
				this.$nextTick(function() {
					//计算需要移动的距离，
					if (index > 0) {
						this.$refs['testEx'].$el.scrollTop = this.height * index
					}
				})
			},
			popImg(filePath) {
				console.log(filePath)
				this.showPreview = true
				this.imgList = filePath
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.app-container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background: #F2F6FA;
		overflow: hidden;

		.app-content {
			flex: 1;
			box-sizing: border-box;
			padding: px2vw(30);
			overflow: auto;

			.app-content-title {
				font-size: px2vw(42);
				line-height: px2vw(62);
				color: #666666;
				padding-bottom: px2vw(30);
			}

			::v-deep .van-collapse-item {
				margin-bottom: px2vw(30);
				border-radius: px2vw(130);
			}

			::v-deep .van-cell {
				border-radius: px2vw(20);
			}

			::v-deep .van-collapse-item__wrapper {
				border-radius: 0 0 px2vw(20) px2vw(20);
			}

			.image-wrap {
				width: 100%;
				height: px2vw(215);
				display: flex;
				margin: px2vw(49) auto;

				.image-list {
					width: 100%;
					display: flex;

					img {
						width: px2vw(215);
						height: px2vw(215);
						margin-right: px2vw(40);
						border-radius: px2vw(6);
					}
				}
			}

			.comment {
				box-sizing: border-box;
				background: #FFFFFF;
				overflow: hidden;
				border-radius: px2vw(20);
				margin-bottom: px2vw(30);

				.select {
					height: px2vw(167);
					display: flex;
					align-items: center;

					.right-arrow {
						width: 8px;
						height: 14px;
					}

					.down-arrow {
						width: px2vw(41);
						height: px2vw(24);
					}

					img {
						margin-right: px2vw(20);
					}

					text {
						font-size: px2vw(42);
						font-weight: bold;
						color: #666666;
						margin-right: auto;
					}

					.active {
						color: #3CDA68;
					}
				}

				.text-content {
					font-size: px2vw(42);
					line-height: px2vw(62);
					color: #666666;
				}

				.number-bottom {
					ul {
						display: flex;
						justify-content: flex-start;
						margin-top: px2vw(20);

						img {
							margin-right: px2vw(75);
						}
					}
				}

				.Instructions {

					text {
						display: block;
						font-size: px2vw(42);

						margin-top: px2vw(25);
						margin-bottom: px2vw(40);
					}

					#area {
						box-sizing: border-box;
						width: px2vw(920);
						height: px2vw(280);
						background: #F7F7F7;
						color: #666666;
						border-radius: px2vw(10);
						font-size: px2vw(38);
						line-height: px2vw(62);
						padding: px2vw(30);
						margin-bottom: px2vw(50);
					}
				}

			}
		}

		.van-preview-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.van-swipe {
				width: 100%;
				height: 100%;
			
				.van-swipe-item {
					display: flex;
			
					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}

		.van-popup {
			background-color: rgba(0, 0, 0, 0.8);

			.van-cell {
				position: absolute;
				bottom: 0;
				border-top: 4px solid #eee;
				z-index: 3;
			}
		}
		::v-deep .van-cell {
			display: flex;
			align-items: center;
			height: px2vw(167);
		}
	}
	
</style>
